<template>
  <div>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>编辑文章</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="$router.go(-1)">返回</el-button>
  </div>
  <div class="text item">
    <!-- 表单 -->
<el-form style="width:800px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="标题:" prop="title">
    <el-input v-model="ruleForm.title"></el-input>
  </el-form-item>

  <el-form-item label="作者:" prop="author">
    <el-input v-model="ruleForm.author"></el-input>
  </el-form-item>

  <el-form-item label="描述:" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>

  <el-form-item label="上传封面:">
    <el-upload
      action="/api/upload"
      list-type="picture-card"
      :on-success="onSuccess"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
     <img width="100" :src=ruleForm.thumb alt="" />
  </el-form-item>

    <el-form-item label="文章详情:">
      <div id="content" >
        <!-- <div v-html="ruleForm.content"></div> -->
      </div>
    </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</el-card>
  </div>
</template>

<script>
import E from 'wangeditor'
import { fetchArtDetail, fetchArtEdit } from '@api'
export default {
  data () {
    return {
      ruleForm: {
        title: '',
        author: '',
        desc: '',
        thumb: '',
        editor: {},
        content: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  // mounted中 调用第三方插件 dom初始化后
  mounted () {
    this.fetchArtDetail()
    this.contentedit()
  },
  methods: {
    // 获取当前id的详情
    fetchArtDetail () {
      fetchArtDetail(this.$route.params.id).then(res => {
        if (res.data.code === 200) {
          this.ruleForm = res.data.data
          this.editor.txt.html(this.ruleForm.content)
          console.log(this.ruleForm)
        }
      })
    },
    // 富文本添加函数
    contentedit () {
      const editor = new E('#content')
      editor.create()
      this.editor = editor
    },
    // 文件上传成功
    onSuccess (response) {
      // response 返回请求成功的响应数据
      this.thumb = response.data.filepath
    },
    // 提交表单
    submitForm (formName) {
      // 双向绑定表单中的值 所以提交的时候 定变量获取表单中的值 当做参数
      const form = this.ruleForm
      // this.$refs[formName] 获取到ref绑定的表单 validate对表格进行验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.thumb = this.thumb
          form.content = this.editor.txt.html()
          // 发送更新请求
          fetchArtEdit(form).then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '修改成功',
                type: 'success',
                onClose: () => {
                  this.$router.push('/artlist')
                }
              })
            }
          })
        } else {
          console.log('请按照要求填写表单')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
